<template>
  <div>
    <cl-descriptions :sortList="sortList" :apiData="apiData" />
    <ClForm style="width: 500px" ref="refForm" :form-item="formItem" @sent-form-data="onGetFormData" />
    <el-button type="primary" size="default" @click="onSubmit">提交</el-button>

    <ClTable
      ref="refTable"
      tableName="审批列表"
      :tableData="tableData"
      :column-list="columnList"
      :filterFormItem="filterFormItem"
    >
      <template #table-name-option>
        <el-button type="primary" size="default" @click="onAdd">新增申请</el-button>
      </template>
    </ClTable>
    <Dialog v-if="hookVisible" v-model="hookVisible" :info="dialogInfo" :type="type" @atClose="onCloseDialog" />
  </div>
</template>

<script setup lang="ts">
import Dialog from './Dialog.vue'

const sortList = ['项目编号', '报销金额']
const apiData = {
  projectNo: 'ZJ2024-1773',
  money: '320'
}
const refForm = ref<any>(null)
const onGetFormData = (val) => {
  console.log('🐷 🐽 onGetFormData 🐽 val👉👉👉', val)
}
const onSubmit = () => {
  refForm.value.onsubmit()
}
let formItem = ref([
  {
    key: 'radio-test',
    value: '',
    name: 'radio测试',
    formType: 'radio',
    verificationData: '',
    elementConfig: {
      options: [{ value: 'op1', label: 'label1' }]
    }
  },
  {
    key: 'data-test',
    value: '',
    name: '日期测试',
    formType: 'date-range',
    verificationData: '',
    elementConfig: {}
  },
  {
    key: 'test2',
    value: '',
    name: '下拉测试',
    formType: 'select',
    verificationData: '',
    elementConfig: {
      options: [{ value: 'op1', key: 'key1' }]
    }
  },
  {
    key: 'content',
    value: '',
    name: '评论',
    formType: 'input',
    verificationData: '',
    elementConfig: {}
  }
])
let { type, hookVisible, dialogInfo, onOpenDialog, onCloseDialog } = useDialog(null)
const onAdd = () => {
  type.value = '新增'
  onOpenDialog({})
}
const tableData = [
  { key1: 'test1', key2: 'test2', key3: 'test3' },
  { key1: 'test11', key2: 'test22', key3: 'test33' },
  { key1: 'test11', key2: 'test22', key3: 'test33' }
]
const columnList = [
  { prop: 'key1', label: 'label1' },
  { prop: 'key2', label: 'label2' },
  { prop: 'key3', label: 'label3' }
]
const filterFormItem = ref([
  {
    key: 'key1',
    value: '',
    name: '测试1',
    formType: 'select',
    elementConfig: {
      textareaWidth: '250px',
      options: []
    }
  },
  {
    key: 'key2',
    value: '',
    name: '测试2',
    formType: 'input',
    elementConfig: {
      textareaWidth: '250px'
    }
  }
])
</script>

<style scoped lang="scss"></style>
